<template>
    <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
      <v-tooltip  />
      <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
      <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
      <v-legend dataKey="user" marker="circle" :offset="30" />
      <v-coord type="polar" radius="0.8" />
      <v-line position="item*score" color="user" :size="2" />
      <v-point position="item*score" color="user" :size="4" shape="circle" />
    </v-chart>
</template>

<script>
// const DataSet = require('@antv/data-set')

// const sourceData = [
//   {item: '引用', a: 70, b: 30, c: 40},
//   {item: '口碑', a: 60, b: 70, c: 40},
//   {item: '产量', a: 50, b: 60, c: 40},
//   {item: '贡献', a: 40, b: 50, c: 40},
//   {item: '热度', a: 60, b: 70, c: 40},
//   {item: '引用', a: 70, b: 50, c: 40}
// ]

// const dv = new DataSet.View().source(sourceData)
// dv.transform({
//   type: 'fold',
//   fields: ['a', 'b', 'c'],
//   key: 'user',
//   value: 'score'
// })

// const scale = [{
//   dataKey: 'score',
//   min: 0,
//   max: 80
// }]

// const data = dv.rows

// const axis1Opts = {
//   dataKey: 'item',
//   line: null,
//   tickLine: null,
//   grid: {
//     lineStyle: {
//       lineDash: null
//     },
//     hideFirstLine: false
//   }
// }
// const axis2Opts = {
//   dataKey: 'score',
//   line: null,
//   tickLine: null,
//   grid: {
//     type: 'polygon',
//     lineStyle: {
//       lineDash: null
//     }
//   }
// }

export default {
  name: 'Radar',
  data () {
    return {
      sourceData:{},
      data:{},
      axis1Opts:{},
      axis2Opts:{},
      scale:{},
    }
  }
}
</script>

<style scoped>

</style>
